<template>

	<view>
		<!-- #ifdef APP-PLUS |H5 -->
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<!-- <view class="status_bar"></view> -->
		<!-- #endif -->
		<view class="my_navbar" :style="{position:fixed==true?'fixed':'',background:background}">

			<view class="left_area" @click="leftClick">
				<text :class="leftIcon" class="custom-icon" v-if="leftIcon" :style="{color:leftIconColor}"></text>
				<text class="left_text">
					{{leftText}}
				</text>
			</view>

			<view class="right_area" @click="rightClick">
				<!-- <text :class="rightIcon" class="custom-icon"></text> -->
				<image class="right_icon" :src="'../../static/image/'+rightIcon+'.png'" mode="aspectFill"></image>
				<text :style="{color:rightColor}">{{rightText}}</text>
			</view>
		</view>
		<!-- <view class="my_navbar"></view> -->
		<view class="navbar_height"></view>
	</view>


</template>

<script>
	export default {
		props: {
			fixed: {
				type: Boolean,
				default: true
			},
			leftText: {
				type: String,
				default: '返回'
			},
			leftIcon: {
				type: String,
				default: 'custom-icon-jiantou2'
			},
			title: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: ''
			},
			rightIcon: {
				type: String,
				default: ''
			},
			rightColor: {
				type: String,
				default: '#6CB19B'
			},
			background: {
				type: String,
				default: '#F6F6F7'
			},
			leftIconColor: {
				type: String,
				default: ''
			},
		},
		methods: {
			leftClick() {
				this.$emit('leftClick')
			},
			rightClick() {
				this.$emit('rightClick')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navbar_height {
		// #ifdef APP-PLUS
		height: calc(80rpx + var(--status-bar-height));
		// #endif
		// #ifndef APP-PLUS
		height: 80rpx;
		// #endif
	}

	.my_navbar {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		// padding: 0 20rpx 0 10rpx;
		padding: 0 30rpx;
		z-index: 9;
		// #ifdef APP-PLUS
		top: var(--status-bar-height);

		// #endif
		.custom-icon {
			font-size: 20px;
		}

		.left_area {
			display: flex;
			align-items: center;
		}

		.left_text {
			display: inline-block;
			padding-left: 10px;
			font-weight: bold;
			font-size: 36rpx;
		}

		.right_icon {
			width: 40rpx;
			height: 40rpx;
		}

		.custom-icon-jiantou2 {
			font-size: 50rpx;
			color: black;
			height: 52rpx;
			line-height: 56rpx;
		}
	}
</style>
